import React, { Component } from 'react'
// 导入私有化项目必须模块化导入
import styles from './index.module.scss'
import { Button, Grid, Modal } from 'antd-mobile'
import { Link } from 'react-router-dom'
import { getUserInfo, logout, login } from '../../api/user'
import { removeToken } from '../../utils/token'
// 菜单数据
const menus = [
    { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
    { id: 2, name: '我的出租', iconfont: 'icon-index', to: '/rent' },
    { id: 3, name: '看房记录', iconfont: 'icon-record', to: '' },
    {
        id: 4,
        name: '成为房主',
        iconfont: 'icon-identity',
        to: ''
    },
    { id: 5, name: '个人资料', iconfont: 'icon-myinfo', to: '' },
    { id: 6, name: '联系我们', iconfont: 'icon-cust', to: '' }
]
export default class My extends Component {
    constructor() {
        super()
        this.state = {
            isLogin: false, // 是否登录
            avatar: '/img/profile/avatar.png', // 头像
            nickname: '游客' // 昵称

        }
    }
    async componentDidMount() {
        const res = await getUserInfo()
        console.log(res.data)
        if (res.data.status === 200) {
            this.setState({
                isLogin: true,
                avatar: res.data.body.avatar,
                nickname: res.data.body.nickname
            })
        }
    }
    // 用户退出
    userLogout = () => {
        Modal.alert('提示', '确定退出吗?', [
            { text: '取消', onPress: null },
            {
                text: '确定', onPress: async () => {
                    const res = await logout()
                    // 清空token
                    removeToken()
                    // 把登录状态和头像、昵称设置为默认值
                    this.setState({
                        isLogin: false, // 是否登录
                        avatar: '/img/profile/avatar.png', // 头像
                        nickname: '游客' // 昵称
                    })
                }
            }
        ])
    }
    render() {
        const { avatar, nickname, isLogin } = this.state
        return (
            <div>
                <div className={styles.title}>
                    <img className={styles.bg} src="http://huangjiangjun.top:8088/img/profile/bg.png" alt="" />
                    <div className={styles.info}>
                        <div className={styles.myIcon}>
                            <img className={styles.avatar} src={`${process.env.REACT_APP_BASEURL}${avatar}`} alt="" />
                        </div>
                        <div className={styles.user}>
                            <div className={styles.name}>{nickname}</div>
                            {isLogin && <div className={styles.auth}><span onClick={() => this.userLogout()}>退出</span></div>}
                            <div className={styles.edit}>
                                {isLogin ? (
                                    <>
                                        编辑个人资料
                                        <span className={styles.arrow}>
                                            <i className='iconfont icon-arrow' />
                                        </span>
                                    </>
                                ) : (
                                        <Button
                                            onClick={() => this.props.history.push('/login')}
                                            size='small'
                                            type='primary'
                                            inline
                                        >
                                            去登录
                                        </Button>
                                    )}
                            </div>
                        </div>
                    </div>
                </div>
                <Grid data={menus} columnNum={3} hasLine={false} square={false} renderItem={dataItem => {
                    return <Link to={dataItem.to} key={dataItem.id}>
                        <div className={styles.menuItem}>
                            <i className={`iconfont ${dataItem.iconfont}`} />
                            <span>{dataItem.name}</span>
                        </div>
                    </Link>
                }} />
                <div className={styles.ad}>
                    <img src='http://huangjiangjun.top:8088/img/profile/join.png' alt="" />
                </div>
            </div>
        )
    }
}
